<template>
  <div class="schedul-container">
    <NavBar title="课程表"></NavBar>
    <h4>{{ myClass }}课程表</h4>
    <table border="1">
      <tr>
        <th></th>
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
      </tr>
      <tr>
        <td colspan="6" style="text-align: center">上午</td>
      </tr>
      <tr>
        <td style="text-align: center">一二节</td>
        <td>{{ schedul.Monday.fir }}</td>
        <td>{{ schedul.Tuesday.fir }}</td>
        <td>{{ schedul.Wednesday.fir }}</td>
        <td>{{ schedul.Thursday.fir }}</td>
        <td>{{ schedul.Friday.fir }}</td>
      </tr>
      <tr>
        <td style="text-align: center">三四节</td>
        <td>{{ schedul.Monday.sec }}</td>
        <td>{{ schedul.Tuesday.sec }}</td>
        <td>{{ schedul.Wednesday.sec }}</td>
        <td>{{ schedul.Thursday.sec }}</td>
        <td>{{ schedul.Friday.sec }}</td>
      </tr>
      <tr>
        <td colspan="6" style="text-align: center">下午</td>
      </tr>
      <tr>
        <td style="text-align: center">五六节</td>
        <td>{{ schedul.Monday.thir }}</td>
        <td>{{ schedul.Tuesday.thir }}</td>
        <td>{{ schedul.Wednesday.thir }}</td>
        <td>{{ schedul.Thursday.thir }}</td>
        <td>{{ schedul.Friday.thir }}</td>
      </tr>
      <tr>
        <td style="text-align: center">七八节</td>
        <td>{{ schedul.Monday.four }}</td>
        <td>{{ schedul.Tuesday.four }}</td>
        <td>{{ schedul.Wednesday.four }}</td>
        <td>{{ schedul.Thursday.four }}</td>
        <td>{{ schedul.Friday.four }}</td>
      </tr>
      <tr>
        <td colspan="6" style="text-align: center">晚上</td>
      </tr>
      <tr>
        <td style="text-align: center">九十节</td>
        <td>{{ schedul.Monday.fif }}</td>
        <td>{{ schedul.Tuesday.fif }}</td>
        <td>{{ schedul.Wednesday.fif }}</td>
        <td>{{ schedul.Thursday.fif }}</td>
        <td>{{ schedul.Friday.fif }}</td>
      </tr>
      <tr>
        <td style="text-align: center">十一十二节</td>
        <td>{{ schedul.Monday.six }}</td>
        <td>{{ schedul.Tuesday.six }}</td>
        <td>{{ schedul.Wednesday.six }}</td>
        <td>{{ schedul.Thursday.six }}</td>
        <td>{{ schedul.Friday.six }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import NavBar from "@/components/navBar.vue";
import axios from "axios";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      myClass: "",
      schedul: {
        Monday: {
          fir: [],
          sec: [],
          thir: [],
          four: [],
          fif: [],
          six: [],
        },
        Tuesday: {
          fir: [],
          sec: [],
          thir: [],
          four: [],
          fif: [],
          six: [],
        },
        Wednesday: {
          fir: [],
          sec: [],
          thir: [],
          four: [],
          fif: [],
          six: [],
        },
        Thursday: {
          fir: [],
          sec: [],
          thir: [],
          four: [],
          fif: [],
          six: [],
        },
        Friday: {
          fir: [],
          sec: [],
          thir: [],
          four: [],
          fif: [],
          six: [],
        },
      },
    };
  },
  methods: {
    async getSchedulData() {
      const { data } = await axios({
        url: "/getSchedul",
        method: "GET",
      });
      if (data.status === 200) {
        this.schedul = data.data;
        this.myClass = data.class;
        // console.log(data.data);
      }
    },
  },
  created() {
    this.getSchedulData();
  },
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.schedul-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 46px;
  height: 100vh;
  h4 {
    display: block;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  table {
    text-align: center;
    font-size: 12px;
    border: 1px solid black;
    tr {
      padding-bottom: 15px;
    }
  }
}
</style>